<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>video播放</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="./js/common.js"></script>
<link rel="stylesheet" href="./css/common/reset.css">
<link rel="stylesheet" href="./fonts/inconfonts.css">
<link rel="stylesheet" href="./fonts/iconfont.css">
<link rel="stylesheet" href="./css/common/common.css">
<link rel="stylesheet" href="./css/base/base.css">
<link rel="stylesheet" href="./css/common/player.css">

<link rel="stylesheet" type="text/css" media="screen" href="./css/common/player.css" />
<style>
    .lrc{
        height: 500px;
        overflow: hidden;
        text-align: center;
        background-color: #227274;
    }
    .songsPlay {
        height: 500px;
        margin-top: 240px;
    }
    .lrc-item {
        height: 20px;
    }
    ul li{
        list-style: none;
        font-size: 15px;
    }
    .bgColor{
        color: #fff;
    }
</style>

</head>
<body>
    <header></header>
    <main>
        <div class="main">
            <!-- 播放器 -->
            <div class="music-player">
                <!-- audio标签 -->
                <audio class="music-player__audio"></audio>
                <!-- 播放器主体 -->
                <div class="music-player__main">
                    <!-- 模糊背景 -->
                    <div class="music-player__blur"></div>
                    <!-- 唱片 -->
                    <div class="music-player__disc">
                        <!-- 唱片图片 -->
                        <div class="music-player__image">
                            <img width="100%" src="" alt="">
                        </div>
                        <!-- 指针 -->
                        <div id="music-player__pointer" style="    width: 25px;
                        position: absolute;
                        right: -10px;
                        top: 0;
                        -webkit-transform-origin: right top;
                        -ms-transform-origin: right top;
                        transform-origin: right top;
                        -webkit-transform: rotate(-15deg);
                        -ms-transform: rotate(-15deg);
                        transform: rotate(-15deg);
                        -webkit-transition: all 0.3s;
                        -o-transition: all 0.3s;
                        transition: all 0.3s;"><img width="100%" src="./resource/static/cd_tou.png" alt=""></div>
                    </div>
                    <!-- 控件主体 -->
                    <div class="music-player__controls">
                        <!-- 歌曲信息 -->
                        <div class="music__info">
                            <h3 class="music__info--title">...</h3>
                            <p class="music__info--singer">...</p>
                        </div>
                        <!-- 控件... -->
                        <div class="player-control">
                            <div class="player-control__content">
                                <div class="player-control__btns">
                                    <div class="player-control__btn player-control__btn--prev"><i class="iconfont icon-prev btnPrev"></i></div>
                                    <div class="player-control__btn player-control__btn--play "><i class="iconfont icon-play btnLrc"></i></div>
                                    <div class="player-control__btn player-control__btn--next"><i class="iconfont icon-next btnNext"></i></div>
                                    <div class="player-control__btn player-control__btn--mode"><i class="iconfont icon-loop"></i></div>
                                </div>
                                <div class="player-control__volume">
                                    <div class="control__volume--icon player-control__btn"><i class="iconfont icon-volume"></i></div>
                                    <div class="control__volume--progress progress"></div>
                                </div>
                            </div>
            
                            <!-- 歌曲播放进度 -->
                            <div class="player-control__content">
                                <div class="player__song--progress progress"></div>
                                <div class="player__song--timeProgess nowTime">00:00</div>
                                <div class="player__song--timeProgess totalTime">00:00</div>
                            </div>
            
                        </div>
            
                    </div>
                </div>
                <!-- 歌曲列表 -->
                <div class="music-player__list">
                    <ul class="music__list_content">
                        <!-- <li class="music__list__item play">123</li>
                        <li class="music__list__item">123</li>
                        <li class="music__list__item">123</li> -->
                    </ul>
                </div>
            </div>
            <div class="lrc">
                <ul class="songsPlay">
    
                </ul>
            </div>
        </div>
    </main>
    <footer></footer>
    <script src="./js/utill.js"></script>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./js/module/appendID.js"></script>
    <script src="./js/module/player.js"></script>

</body>
</html>